اموزش html قسمت اول
 
درباره وبلاگ


به سایت رفع مشکلات کامپیوتر خوش امدید
موضوعات
آرشيو وبلاگ
پیوندهای روزانه


ورود اعضا:

نام :
وب :
پیام :
2+2=:
(Refresh)

خبرنامه وب سایت:





آمار وب سایت:  

بازدید امروز : 106
بازدید دیروز : 3
بازدید هفته : 110
بازدید ماه : 302
بازدید کل : 278345
تعداد مطالب : 89
تعداد نظرات : 0
تعداد آنلاین : 1
body{ align:center}
.
صفحه نخست          پروفایل مدیر وبلاگ        پست الکترونیک           آرشیو مطالب          عناوین مطالب
اموزش html قسمت اول
یک شنبه 8 بهمن 1391برچسب:,
:: 16:15 ::  نويسنده : مهدي

 

آیا می خواهید یکبار امتحان کنید؟

اگر در حال کار با ویندوز هستید برنامه note pad را اجرا کنید. متن زیر را تایپ کنید.

<html>
<head>
<title>title of page </title>
</head>
<body>
This is my first home page.<b> This text is bold </b>
</body>
</html>

فایل را تحت عنوان "mypage.htm"ذخیره کنید.
مرورگر اینترنت خود را باز کنید، از منوی فایل گزینه "open" یا "open page" را انتخاب کنید. یک جعبه گفتگو ظاهر خواهد شد .گزینه "brows" یا "choose file" را انتخاب کنید و در مکانی که فایل HTML خود را ساخته اید قرار گیرید. آن را انتخاب کنید و روی گزینه "open" کلیک کنید.حالا شما یک آدرس در جعبه گفتگوی خود مشاهده خواهید کرد. بعنوان  مثال "C:\mypage.html" گزینه ok را کلیک کنید و مرورگر صفحه را به شما نشان خواهد داد.

مثال تشریح شده

اولین برچسب در فایل HTML شما ، <html> است.این برچسب به مرورگر شما می فهماند که این آغاز یک فایل HTML است، آخرین برچسب در فایل شما <html/> است.این برچسب به فایل شما می فهماند که این انتهای یک فایل HTML است.
متن های بین برچسب و اطلاعات سرانداز (header)شماست .اطلاعات سر انداز در پنجره مرورگر نشان داده نخواهد شد. متن بین برچسب <title>، سرتیتر پرونده شماست. سرتیتر در قسمت عنوان صفحه مرورگر نشان داده خواهد شد.
متنی که در مرورگر نشان داده خواهد شد ، متنی است که بین برچسب <body> نشان داده خواهد شد.
متنی که بین برچسب <b> قرار گیرد در مرورگر بصورت برجسته نشان داده خواهد شد.

پسوند htm. یا html. ?

هنگامی که شما یک فایل HTML را ذخیره می کنید شما می توانید هرکدام از پسوندهای htm. یا html. را انتخاب کنید.ما در مثال هایمان از پسوند htm. استفاده می کنیم. این ممکن است یک رفتار بد موروثی از گذشته باشد که بیشتر نرم افزارهایی که استفاده می شوند فقط پسوند سه حرفی را قبول می کنند.با نرم افزار جدیدتر ما فکر می کنیم که اگر از پسوند html. استفاده کنیم بسیار ایمن تر خواهیم بود.

به ویرایشگر های HTML توجه کنید:

شما می توانید به سادگی با استفاده از یک ویرایشگر WYSIWY("what you see is what you get") فایل های HTML را ویرایش کنید ، مثل FRONT PAGE,Claris Home Page یا Adob PageMill.
اگر شما می خواهید یک توسعه دهنده وب توانا باشید ما توصیه اکید می کنیم که شما از یک ویرایشگر متنی ساده استفاده کنید تا اصول اولیه HTML را یاد بگیرید.

پرسش و پاسخ:

س: پس از اینکه فایل HTML را ویرایش می کنم نمی توانم نتیجه را در مرورگر مشاهده کنم. چرا؟
ج:اطمینان حاصل کنید که فایل را با یک نام و پسوند صحیح ذخیره کرده اید مثل"C:\mypage.htm". همچنین اطمینان حاصل کنید که از همان نام هنگام باز کردن فایل در مرورگر استفاده کرده اید.
س:من سعی کردم فایل HTMLام را ویرایش کنم. اما تغییرات در مرورگرم نشان داده نشد. چرا؟
ج:مرورگر صفحه را کاشه(cach) کرده بنا بر این یک صفحه را دو بار نمی خواند. هنگامی که شما یک صفحه را تغییر می دهید مرورگر آن را نمی داند. از کلید REFRESH/RELOAD مرورگر استفاده کنید تا آن را مجبور کنید صفحه را دوباره بخواند.
س:از چه مرورگری باید استفاده کنیم؟
ج:شما می توانید تمام این آموخته ها را با مرورگرهای متعارف انجام دهید مثل Internet Explorer, Netscape,Mozilla و Opera. هر چند که تعدادی از مثال های مادر کلاس های پیشرفته به آخرین نسخه مرورگرها نیاز دارند.


پرونده های HTML فایل های متنی هستند که با عناصر HTML ساخته شده اند.عناصر HTML با استفاده از برچسب های HTML تعریف می شوند.

برچسب های HTML

  • برچسب های HTML برای نشانه گذاری عناصر HTML استفاده می شوند
  • بر چسب های HTML توسط دو کاراکتر < و > محاط می شوند
  • این کاراکتر های محاط کننده قلاب نامیده می شوند
  • بر چسب های HTML معمولا بصورت جفت می آیند <b> , <b/>
  • اولین برچسب دوتایی برچسب شروع و دومی برچسب پایانی است
  • متن های بین برچسب ابتدایی و انتهایی محتوای عناصر هستند
  • برچسبهای HTML به حروف کوچک و بزرگ حساس نیستند <b> معادل <B> است.

عناصر HTML

مثال HTML در صفحه قبل را بخاطر بیاورید. این یک عنصر HTML است:

<b>This text is bold</b>
عنصر HTML با یک برچسب شروع ، آغاز می شود:<b>
محتوای عنصر HTML: This text is bold
عنصر HTML با یک برچسب پایانی تمام می شود:<b/>
هدف برچسب <b> این است که تعریف کند عناصر HTML باید بصورت برجسته نشان داده شوند این نیز همچنین یک عنصر HTML است:

<body>
This is my first homepage.<b>This text is bold</b>
</body>

این عنصر HTML با برچسب آغازین <body> شروع و با برچسب پایانی <body/> تمام می شود.
هدف برچسب <body> این است که عناصر HTML را که محتوای بدنه HTML هستند تعریف کند.

چرا ما از برچسب هایی با حروف کوچک استفاده می کنیم؟

ما فقط گفتیم که برچسب های HTML حساس به حروف کوچک و بزرگ نیستند و <B>همان معنی <b>را می دهد.هنگامی که شما به وب گردی می پردازد، متوجه خواهید شد که بیشتر آموزش ها در مثال هایشان از حروف بزرگ برچسب های HTML استفاده می کنند.ما همیشه از برچسب های حروف کوچک استفاده می کنیم. چرا؟
اگر شما می خواهید خود را برای نسل های بعدی HTML آماده کنیدشما باید شروع کنید  و از برچسبهای حروف کوچک استفاده کنید.کنسرسیوم شبکه گسترده جهانی (W3C) در نظریه HTML4 خود برچسب های حروف کوچک را توصیه کرده و XHTML(نسل بعدی HTML) برچسبهای حروف کوچک را خواستار شده است.

عناصر برچسب:

برچسبها خود می توانند شامل عناصری باشند ، عناصر می توانند اطلاعات اضافی در باره عناصر HTML در صفحه شما را فراهم کنند.این برچسب عنصر بدنه را در صفحه شما معرفی می کند:
<body>
با اضافه کردن عنصر <bgcolor>شما می توانید به مرورگر بگویید که رنگ پس زمینه شما باید قرمز باشد مثل این:<"body bgcolor="red>
این برچسب یک جدول HTML را معرفی می کند:<table>. با اضافه کردن عنصر حاشیه شما می توانید به مرورگر بگویید که جدول نباید هیچ لبه و حاشیه ای داشته باشد: <"table border="0>
عناصر همیشه در یک زوج نام/مقدار می آیند، مثل این: نام="مقدار"
عناصر همیشه به برچسب شروع عناصر HTML اضافه می شوند

حالتهای کتیشن ، 'قرمز' یا "قرمز"؟

محتوای عناصر باید همیشه در کتیشن ها محدود شوند ، از هر دو حالت کتیشن و  دوبل کتیشن می توان استفاده کرد ولی استفاده از دوبل کتیشن ها متداول تر است. در بعضی موقعیت های نادر مثل هنگامی که محتوای عناصر خود دارای کتیشن هستند  لازم است که از تک کتیشن استفاده کنیم: 'Name='john "shotgun" Nelson


سر تیتر ها

سر تیترها با برچسب های <h1>تا<h6>معرفی می شوند.<h1>بیانگر بزرگترین سرتیتر  و<h6> بیانگر کوچکترین سر تیتر است. HTML بطور خودکار فضای خالی اضافی  به قبل و بعد از سر تیترها اضافه می کند.

<h1> This is a heading </h1>
<h2> This is a heading </h2>
<h3> This is a heading </h3>
<h4> This is a heading </h4>
<h5> This is a heading </h5>
<h6> This is a heading </h6>

پاراگراف ها

پاراگراف ها با برچسب <p> معرفی می شوند.HTML بطور خودکار فضای خالی اضافی به قبل و بعد از یک پاراگراف اضافه می کند.

<p> This is a paragraph </p>
<p> This is another paragraph </p>

پرش به خط بعد

برچسب <br> هنگامی استفاده می شود که بخواهیم یک خط را پایان دهیم اما نمی خواهیم یک پاراگراف جدید را آغاز کنیم.برچسب <br> شما را از هر جا که قرار دارید به یک خط پایین تر می برد. برچسب <br> یک برچسب تکی است و هیچ برچسب پایانی ندارد.

توضیحات در HTML

برچسب توضیحات برای وارد کردن توضیحات در منبع کد HTML استفاده می شود.توضیحات توسط مرورگرها نادیده گرفته می شوند. شما می توانید از توضیحات برای تشریح کد های خود استفاده کنید که می تواند به شما هنگامی که در آینده کد منبع خود را ویرایش می کنید کمک کند.

<!--This is a comment-->

توجه کنید که شما بعد از باز کردن براکت به علامت تعجب نیاز دارید اما قبل از بستن نیاز ندارید.

برچسب Anchor و موجودیت Href

HTML از برچسب <a> برای ساخت یک پیوند به پرونده های دیگر استفاده می کند. یک anchor می تواند به هر منبعی در وب اشاره کند.یک صفحه HTML ، یک عکس ، یک فایل صوتی ، یک فیلم و ... .
دستورالعمل ساخت یک Anchor

<a href="url"> متنی که نمایش داده می شود </a>

در هنگام ساختن یک Anchor باید مکانی که پیوند به آن پرونده اشاره میکند را مشخص کرد. برای نمایش آدرس پرونده از موجودیت href استفاده می شود.کلمات بین بر چسب آغازو پایان Anchor به عنوان فرا پیوند نمایش داده می شود.    
این Anchor یک پیوند به html.ir را معرفی می کند:

<a href="http://www.html.ir"> html.ir را ملاقات کنید </a>


قابها

هر پرونده HTML یک قاب نامیده می شود ، و هر قاب نیز مستقل از دیگر قاب هاست. بدی استفاده از قاب ها این است که :

  • توسعه دهنده وب باید پیوسته رد بیشتر پرونده های HTML را داشته باشد.
  • چاپ کردن کل صفحه مشکل است

برچسب Frameset

  • برچسب <frameset> معرفی می کند که چگونه می شود پنجره را به قابها تقسیم کرد.
  • هر frameset یک مجموعه از سطرها یا ستون ها را معرفی می کند.

برچسب Frame

  • برچسب <frame> پرونده HTML ای را معرفی می کند که در هر قاب قرار می گیرد.

در مثال پایین یک frameset با دو ستون داریم. ستون اول با پهنای 25% از پنجره مرورگر ست شده است.ستون دوم با پهنای 75% از پنجره مرورگر ست شده است. پرونده "HTML "frame_a.html در ستون اول قرار گرفته و پرونده "HTML "frame_b.html در ستون دوم قرار داده شدهاست.

<frameset cols="25%,75%">
    <frame src="frame_a.html">
    <frame src="frame_b.html">
</frameset>


جدول ها

جداول بوسیله برچسب<table>معرفی می شوند.هر جدول به سطرها (بوسیله برچسب <tr>)و هر سطر به سلول های داده تقسیم می شود (بوسیله برچسب <td>) حروف td بیانگر داده جدولی (table data) هستند که حاوی سلول داده است.یک سلول داده می تواند حاوی متن ، عکس ، لیست ها ، پاراگراف ها ، فرم ها ، خط های افقی و جدول ها و... باشد.

row1,cel1 row1,cel2
row2,cel1 row2,cel2
<table border="1">
<tr>
<td>row1,cel1</td>
<td>row1,cel2</td>
</tr>
<tr>
<td>row1,cel1</td>
<td>row1,cel1</td>
</tr>
</table>

جدول ها و عنصر حاشیه

اگر شما عنصر حاشیه را معین نکنید ، جدول بدون حاشیه نشان داده خواهد شد. گاهی اوقات این می تواند مفید باشد اما بیشتر مواقع شما می خواهید که حاشیه ها نشان داده شوند.برای نشان دادن جداول با حاشیه شما باید از عنصر حاشیه (border) استفاده کنید.

<table border="1">
<tr>
<td>row1,cel1</td>
<td>row1,cel2</td>
</tr>
<tr>
<td>row2,cel1</td>
<td>row2,cel2</td>
</tr>
</table>

سر تیترها در جداول

سرتیترها در یک جدول با برچسب <th>مشخص می شوند.

 

Another Heading Heading
row1,cel2 row1,cel1
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row1,cel1</td>
<td>row1,cel2</td>
</tr>
</table>

سلول های خالی در جداول

سلول های جداول با محتوای خالی در بیشتر مرورگرها خوب نشان داده نمی شوند.

row1,cel2 row1,cel1

row2,cel1
<table border="1">
<tr>
<td>row1,cell1</th>
<td>row1,cell2</th>
</tr>
<tr>
<td>row2,cel1</td>
<td></td>
</tr>
</table>

این کدها در مرورگر بدین صورت نشان داده می شوند.توجه کنید که حاشیه های اطراف سلول خالی جدول از بین رفته است(موزیلا فایر فاکس(Fire Fox) حاشیه را نشان می دهد.).برای جلوگیری از آن یک فاصله نا مقطوع(;nbsp&) به سلول داده خالی اضافه کنید تا حاشیه را مشخص سازید.

row1,cel2 row1,cel1
  row2,cel1
<table border="1">
<tr>
<td>row1,cell1</th>
<td>row1,cell2</th>
</tr>
<tr>
<td>row2,cel1</td>
<td> &nbsp; </td>
</tr>
</table>


لیست های نامرتب

یک لیست نامرتب ، لیستی از اقلام است.اقلام لیست بوسیله گلوله نشان گذاری می شوند (معمولا یک دایره سیاه کوچک).یک لیست نامرتب با یک برچسب <ul> آغاز می شوند.هر کدام از اقلام لیست با برچسب <li> آغاز می شوند.

<ul>
<li> Cofee <ul>
<li> Milk <ul>
</ul>
  • Cofee
  • Milk

داخل اقلام لیست می توانید پاراگراف ها، پرش به خط بعد ، عکس ها، پیوند ها ، لیست های دیگر و ... قرار دهید.

لیست های مرتب

یک لیست مرتب شده نیز لیستی از اقلام است. اقلام لیست بوسیله شماره نشان گذاری می شوند.یک لیست مرتب با برچسب <ol> آغاز می شود.هرکدام از اقلام لیستبا برچسب <li> آغاز می شوند.

<ol>
<li> Cofee <ul>
<li> Milk <ul>
</ol>
  1. Cofee
  2. Milk

داخل اقلام لیست می توانید پاراگراف ها، پرش به خط بعد ، عکس ها، پیوند ها ، لیست های دیگر و ... قرار دهید.

لیست های تعریفی

یک لیست تعریفی ، لیستی از اقلام نیست. این لیست ، لیستی از عبارات و توضیحات آن عبارات است.یک لیست تعریفی با برچسب<dl> آغاز می شود.هر کدام از اقلام لیست تعریفی با برچسب <dt> آغاز می شود.هر تعریف در لیست تعریفی با برچسب <dd> آغاز می شود

<dl>
<dt> Cofee </dt>
<dd> Black hot drink </dd>
<dt> Milk </dt>
<dd> White cold drink </dd>
</dl>
Cofee
Black hot drink
Milk
White cold drink

داخل تعاریف یک لیست تعریفی (برچسب <dd>)شما می توانید پاراگراف ها، پرش به خط بعد ، عکس ها، پیوند ها ، لیست های دیگر و ... قرار دهید.

 

فرم ها

یک فرم ، منطقه ای حاوی عناصر فرم است.عناصر فرم ، عناصری هستند که به کاربر اجازه می دهند تا اطلاعات را (مثل فیلدهای متنی ، فیلدهای text area ، لیست های پایین افتان، دکمه های رادیویی ، چک باکس ها و...) در فرم وارد کند.یک فرم با برچسب <form> معرفی می شود.

<form>
<input>
<input>
</form>

input

در برچسب <form> برچسب <input>بیشترین استفاده را دارد.نوع ورودی با خواص آن تعیین می شود.انواع پر کاربرد ورودی ها در پایین توضیح داده شده اند.

فیلدهای متنی

فیلد متنی هنگامی استفاده می شود که شما می خواهید کاربر ، حروف ، اعداد و... را تایپ کند.

First name:

Last name:

<form>
First name: <input type="text" name="firstname" >
<br>
Last name:
<input type="text" name="lastname" >
</form>

توجه کنید که خود فرم قابل رویت نیست ، همچنین توجه داشته باشید که در بیشتر مرورگرها طول فیلد متنی بطور پیش فرض 20 کاراکتر است.

دکمه های رادیویی

دکمه های رادیویی زمانی استفاده می شوند که شما می خواهید از بین تعداد محدودی انتخاب، یکی را انتخاب کند.

male
female
<form>
First name: <input type="radio" name="sex" value="male"> male
<br>
Last name:
<input type="radio" name="sex" value="female" > femail
</form>

توجه کنید که فقط یک گزینه می تواند انتخاب شود.

چک باکس ها (check boxes)

چک باکس ها زمانی استفاده می شوند که شما بخواهید کاربر از میان تعداد محدودی انتخاب ، یک یا چند گزینه را انتخاب کند.

I have a bike
I have a car
<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car" >
I have a car
</form>

عنصر Action فرم و دکمه Submit

هنگامی که کاربر روی دکمه "Submit" کلیک می کند ، محتویات فرم به یک فایل دیگر فرستاده می شوند. فایل معرفی شده در عنصر Action معمولا کاری را با اطلاعات ورودی دریافتی انجام می دهد.

<form name="input value" action="action1.asp">
username:
<input type="text" name="username">
<input type="submit" value="submit">
</form>
username:

اگر شما تعدادی کاراکتر در فیلد متنی بالا تایپ کنید و دکمه "Submit" را کلیک کنید شما ورودی خود را به صفحه ای که "action1.asp" نام دارد خواهید فرستاد.آن صفحه به شما ورودی های دریافتی را نشان خواهد داد.

برچسب Images و موجودیت Src

در HTML عکس ها با برچسب <img > معرفی می شوند.برچسب <img > خالی است بدین معنا که آن فقط حاوی موجودیت هاست و برچسب پایانی ندارد.
برای نمایش یک تصویر در یک صفحه ، شما احتیاج دارید که از موجودیت Src استفاده کنید. Src مخفف source (منبع) است. محتوای موجودیت url ، Src تصویری است که شما می خواهید در صفحه تان نمایش دهید. نحوه معرفی یک تصویر:

<"img src="url >

url به محلی اشاره می کند که تصویر در آنجا قرار دارد . تصویری که "boat.gif" نامیده شده در دایرکتوری "images" در "www.html.ir" دارای این url است:

http://www.html.ir/images/boat.gif

مرورگر تصویر را جایی قرار می دهد که بر چسب تصویر پرونده در آنجا قرار گرفته است.اگر شما برچسب تصویر را بین دو پاراگراف قرار دهید ، مرورگر ابتدا پاراگراف اول ، سپس تصویر و سپس پاراگراف دوم را نشان می دهد.

موجودیت Alt

موجودیت Alt برای معرفی متن جایگزین به جای یک تصویر استفاده می شود. محتوای موجودیت Alt یک متن توصیفی است:

<"img src="url" alt="Big Boat>

اگر مرورگر نتواند تصویری را بارگیری نماید ، موجودیت alt به خواننده می گوید که آن را در صفحه از دست داده است ، سپس مرورگر متن جایگزین را بجای آن نشان خواهد داد.


پس زمینه ها

برچسب <body> دو موجودیت دارد که شما می توانید با استفاده از آن پس زمینه را تعیین کنید. پس زمینه می تواند یک رنگ یا تصویر باشد.

Bgcolor

موجودیت Bgcolor ، رنگ پس زمینه یک صفحه HTML را تعیین می کند.محتوای این موجودیت می تواند یک عدد مبنای 16 ، یک مقدار RGB یا نام یک رنگ باشد:

< body bgcolor="#000000" >
< body bgcolor="black" >
< body bgcolor="rgb(0,0,0)" >

خطوط بالا رنگ پس زمینه را به رنگ مشکی ست می کنند.

پس زمینه

موجودیت Background یک تصویر را برای پس زمینه یک صفحه HTML تعیین می کند . محتوای این موجودیت url تصویری است که شما می خواهید از آن استفاده کنید. اگر تصویر کوچکتر از پنجره مرورگرتان است ، تصویر خودش را تکرار می کند تا پنجره مرورگرتان را پرکند.

< body background="./content/fa/home/background/clouds.gif" >
< body background="http://www.html.ir/clouds.gif" >

url می تواند مرتبط باشد (مثل خط اول) ویا کامل باشد(مثل خط دوم).
توجه: اگر شما می خواهید از یک تصویر در پس زمینه استفاده کنید باید به خاطر داشته باشید:

  • آیا تصویر پس زمینه زمان بارگیری را بهبود می بخشد؟
  • آیا تصویر پس زمینه با تصاویر دیگر در صفحه خوب به نظر می رسد؟
  • آیا تصویر پس زمینه با رنگ متن ها خوب به نظر می رسد؟
  • آیا تصویر پس زمینه هنگامی که در صفحه تکرار می شود ، خوب به نظر می رسد؟
  • آیا تصویر پس زمینه مرتبا تمرکز را از متن می گیرد؟





نظرات شما عزیزان:

نام :
آدرس ایمیل:
وب سایت/بلاگ :
متن پیام:
:) :( ;) :D
;)) :X :? :P
:* =(( :O };-
:B /:) =DD :S
-) :-(( :-| :-))
نظر خصوصی

 کد را وارد نمایید:

 

 

 

عکس شما

آپلود عکس دلخواه:







 
 
نویسندگان
پیوندها
آخرین مطالب